<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='lib/webgl-utils.js'></script>
    <script src='lib/webgl-debug.js'></script>
    <script src='lib/cuon-utils.js'></script>
    <script src='lib/cuon-matrix.js'></script>
</head>
<body onload="main()">
<canvas id="mybox" width="500" height="400">
    请更换新版浏览器查看效果!
</canvas>
<script >
    let VSHADER_SOURCE=`
    attribute vec4 a_position;
    attribute vec4 a_color;
    uniform mat4 u_viewMatrix;
    varying vec4 v_color;
    void main(){
        gl_Position=u_viewMatrix * a_position;
        v_color=a_color;
    }
    `
    let FSHADER_SOURCE=`
    #ifdef GL_ES
    precision mediump float;
    #endif
    varying vec4 v_color;
    void main(){
    gl_FragColor = v_color;
    }
    `

    function main(){
        let canvas=document.getElementById('mybox')
        let gl=getWebGLContext(canvas)
        if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
            console.log('初始化shader失败');
            return;
        }
        let n=initVertexBuffers(gl);
        if (n < 0) {
            console.log('Failed to set the vertex information');
            return;
        }
        gl.clearColor(0,0,0,1);
        let u_viewMatrix=gl.getUniformLocation(gl.program,'u_viewMatrix');
        if (!u_viewMatrix) {
            console.log('Failed to get the storage locations of u_viewMatrix');
            return;
        }

        let viewMatrix=new Matrix4();
        document.onkeydown=function(e){
            keydown(e,gl,n,u_viewMatrix,viewMatrix);
        };
        draw(gl,n,u_viewMatrix,viewMatrix);
    }

    function initVertexBuffers(gl){
        let verticesColor=new Float32Array([
            0.0,  0.5,  -0.4,  0.4,  1.0,  0.4, // The back green one
            -0.5, -0.5,  -0.4,  0.4,  1.0,  0.4,
            0.5, -0.5,  -0.4,  1.0,  0.4,  0.4,

            0.5,  0.4,  -0.2,  1.0,  0.4,  0.4, // The middle yellow one
            -0.5,  0.4,  -0.2,  1.0,  1.0,  0.4,
            0.0, -0.6,  -0.2,  1.0,  1.0,  0.4,

            0.0,  0.5,   0.0,  0.4,  0.4,  1.0,  // The front blue one
            -0.5, -0.5,   0.0,  0.4,  0.4,  1.0,
            0.5, -0.5,   0.0,  1.0,  0.4,  0.4,

        ]);
        let n=9;

        let vertexColorbuffer=gl.createBuffer();
        if (!vertexColorbuffer) {
            console.log('Failed to create the buffer object');
            return -1;
        }
        gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorbuffer);
        gl.bufferData(gl.ARRAY_BUFFER,verticesColor,gl.STATIC_DRAW);
        let FSIZE=verticesColor.BYTES_PER_ELEMENT;
        let a_position=gl.getAttribLocation(gl.program,'a_position');
        if(a_position < 0) {
            console.log('Failed to get the storage location of a_position');
            return -1;
        }
        gl.vertexAttribPointer(a_position,3,gl.FLOAT,false,FSIZE*6,0);
        gl.enableVertexAttribArray(a_position);

        let a_color=gl.getAttribLocation(gl.program,'a_color');
        if(a_color < 0) {
            console.log('Failed to get the storage location of a_color');
            return -1;
        }
        gl.vertexAttribPointer(a_color,3,gl.FLOAT,false,FSIZE*6,FSIZE*3);
        gl.enableVertexAttribArray(a_color);
        //解除绑定
        gl.bindBuffer(gl.ARRAY_BUFFER,null);
        return n;
    }

    let g_eyeX=0.20,g_eyeY=0.25,g_eyeZ=0.25;
    function keydown(e,gl,n,u_viewMatrix,viewMatrix){
        if(e.keyCode === 39){
            g_eyeX += 0.01;
        }else if(e.keyCode === 37){
            g_eyeX -= 0.01;
        }else if(e.keyCode === 38){
            g_eyeY += 0.01;
        }else if(e.keyCode === 40){
            g_eyeY -= 0.01;
        }else if(e.keyCode === 33){
            g_eyeZ += 0.01;
        }else if(e.keyCode === 34){
            g_eyeZ -= 0.01;
        }else {
            return;
        }
        draw(gl,n,u_viewMatrix,viewMatrix);
    }

    function draw(gl,n,u_viewMatrix,viewMatrix){
        viewMatrix.setLookAt(g_eyeX,g_eyeY,g_eyeZ,0,0,0,0,1,0);
        gl.uniformMatrix4fv(u_viewMatrix,false,viewMatrix.elements);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES,0,n);
    }


</script>

</body>
</html>